<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$(".show").click(function(){
					$("div").show();
				})
				$(".hide").click(function(){
					$("div").hide();
				})
				$(".toggle").click(function(){
					$("div").toggle();
				})
				
				
				$(".slideDown").click(function(){
					$("div").slideDown();
				})
				$(".slideUp").click(function(){
					$("div").slideUp();
				})
				$(".slideToggle").click(function(){
					$("div").slideToggle();
				})
				
				// 透明
				$(".fadeIn").click(function(){
					$("div").fadeIn();
				})
				$(".fadeOut").click(function(){
					$("div").fadeOut();
				})
				// fadeTo() 方法将被选元素的不透明度逐渐地改变为指定的值。
				$(".fadeTo").click(function(){
					$("div").fadeTo(1000,0.5);
				})
				$(".fadeToggle").click(function(){
					$("div").fadeToggle();
				})
				
				
				// 方法执行 CSS 属性集的自定义动画。
				$(".animate").click(function(){
					$("div").animate({height:"200px"});
				})
				// stop() 方法停止当前正在运行的动画。
				$(".stop").click(function(){
					$("div").stop();
				})
				// delay() 方法对队列中的下一项的执行设置延迟。
				$(".delay").click(function(){
					$("div").delay();
				})
				// 停止当前正在运行的动画，删除所有排队的动画，并完成匹配元素所有的动画。
				$(".finish").click(function(){
					$("div").finish();
				})
			})
			
		</script>
	</head>
	<body>
		
		<!-- 基本
		show([s,[e],[fn]])
		hide([s,[e],[fn]])
		toggle([s],[e],[fn]) -->
		<button type="button" class="show">show</button>
		<button type="button" onclick="" class="hide">hide</button>
		<button type="button" onclick="" class="toggle">toggle</button>
		
<!-- 		滑动
		slideDown([s],[e],[fn]) 
		slideUp([s,[e],[fn]]) 
		slideToggle([s],[e],[fn]) -->
		<button type="button" onclick="" class="slideDown">slideDown</button>
		<button type="button" onclick="" class="slideUp">slideUp</button>
		<button type="button" onclick="" class="slideToggle">slideToggle</button>
		
		<!-- 淡入淡出
		fadeIn([s],[e],[fn]) 
		fadeOut([s],[e],[fn]) 
		fadeTo([[s],o,[e],[fn]]) 
		fadeToggle([s,[e],[fn]]) -->
		<button type="button" onclick="" class="fadeIn">fadeIn</button>
		<button type="button" onclick="" class="fadeOut">fadeOut</button>
		<button type="button" onclick="" class="fadeTo">fadeTo</button>
		<button type="button" onclick="" class="fadeToggle">fadeToggle</button>
		
		<!-- 自定义
		animate(p,[s],[e],[fn])1.8* 
		stop([c],[j])1.7*
		delay(d,[q])
		finish([queue])1.9+ -->
		<button type="button" onclick="" class="animate">animate</button>
		<button type="button" onclick="" class="stop">stop</button>
		<button type="button" onclick="" class="delay">delay</button>
		<button type="button" onclick="" class="finish">finish</button>
		
		<div style="width: 100px;height: 100px;background-color: aqua;"></div>
	</body>
</html>
